<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理界面</title>
    <link href="{{ url_for('static',filename='layui/css/layui.css') }}" rel="stylesheet">
    {#    <link rel="stylesheet" href="../../static/css/layui.css" media="all">#}
    <script type="text/javascript" src="{{ url_for('static',filename='jquery/jquery-3.5.1.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='layui/layui.js') }}"></script>
</head>

{#<script type="text/javascript">#}
{#    function saveinfoForAjax(){#}
{#        // alert($("#f2").serialize())#}
{#uname = $("#l_uname").val();#}
{#unicn=$("unicn").val()#}
{#unien=$("unicn").val()#}
{#unitag=$("unicn").val()#}
{#        $.ajax({#}
{#            url: '/addunviinfo',#}
{#            data: $("addinfo1").serialize(),#}
{#            method: "get",#}
{#            success: function (result) {#}
{##}
{#                var obj = new Function("return" + result)();//转换后的JSON对象#}
{#                var res = obj.cnt;#}
{##}
{#lists.push(obj.he)#}
{#                if (res == "1") {#}
{#                    layer.msg('添加成功', {#}
{#                        time: 1000,#}
{#                        icon: 1#}
{#                    }, function () {#}
{#                        window.location.href = "/suceessForUser?username=" + username#}
{#                    });#}
{#                } else#}
{#                    layer.msg("login fault", {#}
{#                        time: 3000,#}
{#                        icon: 2#}
{#                    });#}
{#            }, error: function (e) {#}
{#                layer.msg("request server error")#}
{#            }#}
{#        });#}
{##}
{#    }#}
{##}
{##}
{#</script>#}

<style>
    .layui-table-cell {
        text-align: center;
    }

    .my-form {
        margin-top: 5%;
    }

    .item {
        margin-left: 130px;
    }

    .my-form-item {
        padding-top: 20px;
    }
</style>

<body>

<table class="layui-hide" id="test" lay-filter="test"></table>


{#<div id="add-main" style="display: none;">#}
{#    <div class="my-form">#}
{#        <form class="layui-form" action="/addunviinfo" id="addinfo1" name="addinfo1" method="get" lay-skin="line">#}
{#            <div class="layui-form-item my-form-item">#}
{#                <label class="layui-form-label layui-icon">&#xe770;</label>#}
{#                <div class="layui-input-inline">#}
{#                    <input type="text" id="unicn" name="unicn" lay-verify="required" placeholder="请输入新增加的类别名称" autocomplete="off"#}
{#                           class="layui-input">#}
{#                </div>#}
{#            </div>#}
{#            <div class="layui-form-item my-form-item">#}
{#                <label class="layui-form-label layui-icon">&#xe673;</label>#}
{#                <div class="layui-input-inline">#}
{#                    <input type="date" name="unien" id="unien" lay-verify="required" placeholder="请输入创建时间" autocomplete="off"#}
{#                           class="layui-input">#}
{#                </div>#}
{#            </div>#}
{#            <div class="layui-form-item my-form-item">#}
{#                <label class="layui-form-label layui-icon">&#xe66c;</label>#}
{#                <div class="layui-input-inline">#}
{#                    <input type="text" name="unitag" id="unitag" lay-verify="required" placeholder="请输入更新人" autocomplete="off"#}
{#                           class="layui-input">#}
{#                </div>#}
{#            </div>#}
{#            <div class="layui-form-item my-form-item">#}
{#                <div class="layui-input-block item">#}
{#                    <button class="layui-btn" lay-submit="" lay-filter="demo1" id="submit1">保存</button>#}
{#                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>#}
{#                </div>#}
{#            </div>#}
{#        </form>#}
{#    </div>#}
{#</div>#}

<script type="text/html" id="toolbarDemo">

    <div class="">
        {#        <div class="layui-row layui-col-space4">#}
        <div>
            {#            <div class="layui-col-xs12">#}
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="layui-container">
                        <div class="layui-input-inline">
                            <select name="modules" lay-verify="required" lay-search="" id="testselect">
                                <option value="">选择或搜索文章类型</option>
                                <option value="1">玄幻奇幻</option>
                                <option value="2">武侠仙侠</option>
                                <option value="3">都市生活</option>
                                <option value="4">历史军事</option>
                                <option value="5">游戏竞技</option>
                                <option value="6">科幻未来</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" name="search" placeholder="请输入文章名称" class="layui-input">
                        </div>
                        <button class="layui-btn layui-btn-sm layui-icon" lay-event="search">&#xe615;</button>
                        <a href="addArtInfo" class="layui-btn layui-btn-radius">
                            <span class="layui-icon layui-icon-addition"></span> 添加</a>
                    </div>
                </div>
            </div>
            <div>
            </div>
            {#                <div class="layui-card-body">#}
            {#                    <div id="bar" style="width: 100%;height: 300px">#}
            {##}
            {#                    </div>#}
            {#                </div>#}
        </div>
    </div>
</script>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-icon" lay-event="del">&#xe640;</a>
</script>

{#<script src="../../static/layui.js" charset="utf-8"></script>#}
<script>
    layui.use(['table', 'layer'], function () {
        var table = layui.table,
            layer = layui.layer;
        var $ = layui.$;

        table.render({
            url: "/findArtList"   //换成自己的url
            , method: "GET"
            , elem: '#test'
            , toolbar: '#toolbarDemo'
            , title: '用户数据表'
            , limit: 5
            , limits: [5, 10, 15, 20, 100]
            , page: true
            , cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    {#, {field: 'id', title: 'ID', width: 120, fixed: 'left', unresize: true}#}
                    , {field: 'book_id', title: 'book_id', width: 120, fixed: 'left', unresize: true}
                    , {field: 'book_name', title: '小说名称', width: 160, edit: 'text'}
                    {#, {field: 'book_des', title: '关键词', width: 160, edit: 'text'}#}
                    , {field: 'author', title: '作者', width: 260, edit: 'text'}
                    , {field: 'book_price', title: '价格', width: 150, edit: 'text'}
                    {#, {field: 'summaty', title: '摘要', width: 150, edit: 'text'}#}
                    , {field: 'leibie', title: '类别', width: 150, edit: 'text'}

                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                ]
            ]

        });

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
                case 'add':
                    layer.open({
                            title: '增加用户',
                            /*如果是外部的html，type2，内部，type1*/
                            type: 1,
                            btnAlign: 'c',
                            area: ['400px', '340px'],
                            content: $("#add-main").html()
                            //未做的是去监听表单提交，给后台发送ajax请求
                        }
                    )
                    ;
                    break;
                case
                'batchDel'
                :
                    /*发送ajax请求到后台执行批量删除*/
                    break;
                case 'flush':
                    table.reload('test', {
                        url: "/flush"
                        , method: "GET"
                    });
                    break;
                case
                'search'
                :
                {#layer.msg("按照类别查找");#}
                    var options = $("#testselect option:selected");
                    var di = options.text();
                    var dii = di + '11'

                    var name = $('input[name="search"]').val();

                {#layer.msg(name)#}
                    table.reload('test', {
                        url: '/searchinfo1',    //换成自己的url
                        where: {
                            name: name,
                            di: di
                        },
                        page: {
                            curr: 1
                        }
                    });
                    break;
            }
            ;
        });

        //监听单元格编辑
        table.on('edit(test)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段

            $.ajax({
                url: '/updateinfo2',      //换成自己的url
                type: 'get',
                dataType: 'json',
                data: data,
                success: function (e) {
                    if (e.code == 0) {
                        layer.msg('更新失败');
                    } else {
                        layer.msg('更新成功');
                    }
                },
                error: function (e) {
                    layer.msg('请求异常');
                }
            })
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                    $.ajax({
                        url: "/delByid",    //换成自己的url
                        type: "get",
                        dataType: "json",
                        data: {
                            id: data.id
                        },
                        success: function (e) {
                            if (e.code == 0) {
                                layer.msg('删除失败');
                            } else {
                                layer.msg('删除成功');
                                window.location.href = '/classList'
                            }
                        },
                        error: function (e) {
                            layer.msg('请求异常');
                        }
                    })
                });
            } else if (obj.event == 'add') {
                $.ajax({
                    url: "/addunviinfo1",      //这里换成自己的url即可
                    type: "get",
                    dataType: "json",
                    data: data,
                    success: function (e) {
                        if (e.code == 0) {
                            layer.msg("添加失败");
                            {#window.location.href='/classList'#}

                        } else {
                            layer.msg('添加成功');
                            {#window.location.href='/classList'#}
                        }
                    },
                    error: function (e) {
                        layer.msg('请求失败');
                    }
                })
            }
        });
    })
</script>
</body>
</html>
